<template>
  <div style="height: 100%;background-color:white ;">
    <el-row>
      <el-col :span="8">
        <div v-if="this.radioStatus==='exportTable'" style="display: inline-block;margin-right: 10px">
          <el-upload
            :on-success="updateWordsTable"
            :show-file-list="false"
            accept=".xlsx"
            action="/pmph/action/word/exportWordsTemplate"
            auto-upload class="upload-demo">
            <el-button size="small" type="primary">词语导入</el-button>
          </el-upload>
        </div>
        <el-button v-if="this.radioStatus==='exportTable'" size="small" type="success" @click="download">词语模板下载
        </el-button>
        <el-button size="small" type="success" @click="multipleAudit">批量审核
        </el-button>
        <el-button size="small" type="success" @click="allAudit">一键审核
        </el-button>
        <div style="display: inline-block">
          <div style="display: inline-block"><span></span></div>
        </div>
      </el-col>
      <el-col :span="8">
        <el-radio-group v-model="radioStatus" size="small" style="margin-left: 130px" @change="valueChange()">
          <el-radio-button label="exportTable">导入列表</el-radio-button>
          <el-radio-button label="LoadTable">自动加载列表</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="8" style="right: auto">
        <div>
          <div style="width: 430px; float: right">
            <el-input v-model="name" placeholder="请输入搜索条件" size="small" @keyup.enter.native="getTableData">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <el-button slot="append" :icon="appendIcon" @click="switchAppend"></el-button>
            </el-input>
          </div>
          <div v-if="showAdvance" id="advance" style="padding: 10px; float: right">
            <div>
              <div v-if="this.radioStatus==='exportTable'">
                <div style="width: 100px;text-align:right; display: inline-block">
                  <span>分类</span>
                </div>
                <div style="display: inline-block">
                  <el-input v-model="tagName" placeholder="请输入分类" size="small"
                            style="width: 300px;margin-top: 10px"></el-input>
                </div>
              </div>
              <div>
                <div style="width: 100px;text-align:right; display: inline-block">
                  <span>词语来源</span>
                </div>
                <div style="display: inline-block">
                  <el-input v-model="sourceType" placeholder="请输入词语来源" size="small"
                            style="width: 300px;margin-top: 10px"></el-input>
                </div>
              </div>
              <div v-if="this.radioStatus==='exportTable'">
                <div style="width: 100px;text-align:right; display: inline-block">
                  <span>导入者</span>
                </div>
                <div style="display: inline-block">
                  <el-input v-model="createdBy" placeholder="请输入导入者" size="small"
                            style="width: 300px;margin-top: 10px"></el-input>
                </div>
              </div>
              <div>
                <div style="width: 100px;text-align:right; display: inline-block">
                  <span>导入时间</span>
                </div>
                <div style="display: inline-block;margin-top: 10px">

                  <el-date-picker
                    v-model="updateTime"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    size="small"
                    start-placeholder="开始日期"
                    style="width: 300px;"
                    type="daterange"
                    value-format=" yyyy-MM-dd HH:mm:ss"
                    @change="dateChange">
                  </el-date-picker>
                </div>
              </div>
            </div>
            <div style="margin-top: 60px; right: 10px;">
              <el-row>
                <el-col :offset="7" :span="9">
                  <div style="margin-left: 90px;height: 32px; width: 88px;">
                    <el-button size="small" v-on:click="advanceCancel">取 消</el-button>
                  </div>
                </el-col>
                <el-col :offset="0.8" :span="2">
                  <div div style="margin-left: 5px;height: 32px; width: 88px;">
                    <el-button size="small" type="success" v-on:click="replacement">重 置</el-button>
                  </div>
                </el-col>
                <el-col :offset="2" :span="2">
                  <div div style="margin-left: 5px;height: 32px; width: 88px;">
                    <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div>
        <el-table :data="tableData" :height="tableHeight" border stripe style="width: 100%;margin-top: 10px"
                  @selection-change="handleSelectionChange">
          <el-table-column
            v-model="multipleSelection"
            type="selection" align="center"
            width="55">
          </el-table-column>
          <el-table-column label="词语名称" min-width="300" prop="name">
            <template slot-scope="scope">
              <span v-html="scope.row.name"></span>
            </template>
          </el-table-column>
          <el-table-column label="英文名称" min-width="100" prop="englishName"></el-table-column>
          <el-table-column label="同义词" min-width="150" prop="synonym">
            <template slot-scope="scope">
              <span v-html="scope.row.synonym"></span>
            </template>
          </el-table-column>
          <el-table-column label="词语分类" min-width="150" prop="tag"></el-table-column>
          <el-table-column label="词语来源" min-width="150" prop="sourceType">
          </el-table-column>
          <el-table-column label="导入者" min-width="150"
                           prop="createdBy"></el-table-column>
          <el-table-column :formatter="UTIL.dateFormat" label="更新时间" min-width="160"
                           prop="updatedTime"></el-table-column>
          <el-table-column v-if="this.radioStatus==='exportTable'" label="操作" min-width="200">
            <template slot-scope="scope">
              <span><el-link type="success"
                             @click.prevent="auditWords(scope.row)">审核</el-link></span>
              <span><el-link type="danger"
                             @click.prevent="del(scope.row.id)">删除</el-link></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-row>
    <el-row>
      <div style="margin-top: 10px">
        <el-pagination
          v-if="multiplePages"
          :page-size="pageSize"
          :page-sizes="[5, 10, 15, 20, 50, 100]"
          :total="totalNum"
          background
          layout="total, sizes, prev, pager, next, jumper"
          style="text-align: right;"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"></el-pagination>
      </div>
    </el-row>

    <el-dialog :visible.sync="newDialogVisible" title="审核" width="500px" @click="closeNewDialog">
      <el-row>
        <el-col :span="6">
          <span class="label">词语名称<em style="color: red">*</em></span>
        </el-col>
        <el-col :span="18">
          <kind-editor :content.sync="word.name" editor-type="Input" placeholder="请输入词语"
                       width="100%"/>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="6">
          <span class="label">英文名称</span>
        </el-col>
        <el-col :span="18">
          <el-input v-model="word.englishName" placeholder="请输入英文名称"></el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="6">
          <span class="label">同义词</span>
        </el-col>
        <el-col :span="18">
          <kind-editor :content.sync="word.synonym" editor-type="Input" placeholder="请输入同义词"
                       width="100%"></kind-editor>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="6">
          <span class="label">分类</span>
        </el-col>
        <el-col :span="18">
          <el-input v-model="word.tag" placeholder="请输入分类"></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeNewDialog">取 消</el-button>
        <el-button type="primary" @click="saveWord">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

export default {
  name: "WordsDraftTable",
  data() {
    return {
      radioStatus: 'exportTable',
      tableData: [],
      multipleSelection: [],
      multiplePages: true,
      appendIcon: "el-icon-caret-bottom",
      noData: true,
      totalNum: 0,
      showAdvance: false,
      currentPage: 0, // 第几页
      pageSize: 10, // 每页显示的数据个数
      exportVisible: false,
      newDialogVisible: false,
      name: '',
      englishName: '',
      synonym: '',
      tagName: '',
      updateTime: '',
      sourceType: '',
      createdBy: '',
      tableHeight: '',
      exportEnable: '',
      word: {}
    }
  },
  methods: {
    auditWords(row) {
      console.log(row)
      this.word = JSON.parse(JSON.stringify(row))
      this.newDialogVisible = true

    },
    del(id) {
      this.$confirm('您确认要永久删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        this.axios.get("/pmph/action/word/deleteById", {
          params: {
            id: id
          }
        }).then(() => {
          this.getTableData()
        })
      })
    },
    multipleAudit() {
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请选中审核的词语")
        return
      }
      let ids = this.multipleSelection.map(item => item.id).join("','");
      let param = new URLSearchParams();
      param.append("ids", ids)
      param.append("radioStatus", this.radioStatus)
      this.axios.post('/pmph/action/word/bulkAudit', param)
        .then(() => {
          this.getTableData()
        })
    },
    allAudit() {
      let param = new URLSearchParams();
      param.append("radioStatus", this.radioStatus)
      param.append("name", this.name)
      param.append("tagName", this.tagName)
      param.append("sourceType", this.sourceType)
      param.append("createdBy", this.createdBy)
      param.append("updateTime", this.updateTime.toString())
      this.axios.post('/pmph/action/word/updateAllWord', param)
        .then(() => {
          this.getTableData()
        })
    },
    saveWord() {
      if (UTIL.isEmpty(this.word.name)) {
        this.$message.warning("词语名称不能为空")
        return;
      }
      this.axios.get("/pmph/action/word/addWord", {
        params: {
          words: JSON.stringify(this.word)
        }
      }).then(() => {
        this.newDialogVisible = false
        this.getTableData()
      })
    },
    updateWordsTable(response) {
      this.exportVisible = false
      this.getTableData()

    },
    download() {
      window.location.href = '/pmph/action/word/downLoadWordsTemplate'
    },
    closeNewDialog() {
      this.newDialogVisible = false
    },
    getTableData() {
      this.axios.get("/pmph/action/word/selectTableData", {
        params: {
          name: this.name,
          tagName: this.tagName,
          sourceType: this.sourceType,
          createdBy: this.createdBy,
          updateTime: this.updateTime.toString(),
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          radioStatus: this.radioStatus
        }
      }).then((response) => {
        this.totalNum = response.data.totalNum;
        this.tableData = response.data.tableData
        console.log(response)
      })
    },
    advanceCancel() {
      this.showAdvance = false;
    },
    replacement: function () {
      this.name = ''
      this.sourceType = ''
      this.createdBy = ''
      this.tagName = ''
      this.updateTime = ''

    },
    advanceConfirm() {
      this.getTableData();
      this.showAdvance = false;
    },
    dateChange(val) {
      this.updateTime = val;
      if (val == null) {
        this.updateTime = ''
      }
    },
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    },
    handleCurrentChange: function (val) {
      this.currentPage = val - 1;
      this.getTableData();
    },
    handleSizeChange(value) {
      this.pageSize = value
      this.getTableData()
    },
    valueChange: function () {
      this.getTableData()

    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
  }, created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 95;
    this.getTableData()
  }
}
</script>

<style scoped>

</style>
